<template>
  <div>
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 注册
    </div>
    <div class="ipt">
      <van-field v-model="tel" placeholder="请输入手机号" class="tel" @input="disChange()" clearable type="text" />
    </div>
    <van-button
      @click="goReg1"
      class="btn"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      :disabled="disabled"
    >
      下一步
    </van-button>
  </div>
</template>

<script>
// import axios from "axios";
import { Toast } from 'vant';

export default {
  name: "Reg",
  data() {
    return {
      tel: '',
      disabled: ''
    };
  },
  created() {
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    goReg1() {
      this.$service.post('api/user/docheckphone', {
        tel:this.tel,
      }).then((res) => {
        if (res.data.code == '200') {
          this.$router.push("/Reg1?tel="+this.tel);
        } else {   
          Toast('该用户已被注册')
        }
      })
    },
    disChange() {
      let reg=/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (reg.test(this.tel.trim())) {
         this.disabled=false
      } else {
        this.disabled=true
      }
    }
    },
};
</script>

<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.ipt {
  width: 20rem;
  /* height: 6rem; */
  margin: 2rem auto;
}
.btn {
  margin: 0 auto;
  width: 80%;
  display: block;
  border-radius: 5rem;
}
.goreg {
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active {
  color: rgb(255, 77, 0);
}
</style>